<div>
    <bs-modal #backupModal>
        <bs-modal-header [showDismiss]="true">
            <h4 class="modal-title">Backup Finished Event</h4>
        </bs-modal-header>
        <bs-modal-body>

            <div class="row">
                <div class="col-md-12 ">
                    <ul class="list-unstyled">
                        <li>
                            <i class="fa fa-angle-right">
                            </i>
                            <b>Info:</b> {{event.title}} at {{ event._source.timestamp | date : 'medium' }}
                        </li>
                        <li>
                            <i class="fa fa-angle-right">
                            </i>
                            <b>Path:</b> {{ event._source.path }}
                        </li>
                        <li>
                            <i class="fa fa-angle-right">
                            </i>
                            <b>Filename:</b> {{ event._source.fileName }}
                        </li>
                        <li>
                            <i class="fa fa-angle-right">
                            </i>
                            <b>File size:</b> {{ event._source.fileSize | toSizeString }}
                        </li>
                        <li>
                            <i class="fa fa-angle-right">
                            </i>
                            <b>Execution time:</b> {{ event._source.elapsedTime }}
                        </li>
                    </ul>
                </div>
            </div>
        </bs-modal-body>
        <bs-modal-footer [showDefaultButtons]="false">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button class="btn btn-primary" (click)="restoreDatabase()">Restore database</button>
            <button class="btn btn-danger" (click)="removeBackup()">Remove Backup</button>
        </bs-modal-footer>
    </bs-modal>

    <bs-modal #restoreBackupModal>
        <bs-modal-header [showDismiss]="true">
            <h4 class="modal-title">Restore Backup to <b>{{restored.target}}</b></h4>
        </bs-modal-header>
        <bs-modal-body>
            <div class="row">
                <div class="col-md-12">
                    <form id="signin" name="newDB" class="form-horizontal" novalidate="">
                        <fieldset>
                            <div class="form-group">
                                <label class="control-label col-md-2">Database name</label>
                                <div class="col-md-10">
                                    <input type="text" [disabled]="!canEdit" class="form-control" name="target"
                                        required [(ngModel)]="restored.target" placeholder="Database name" focus="true" />
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>

            <div class="row">

                <div class="col-md-12">

                    <div class="studio-well">
                        <p>
                            The selected backup is part of an incremental backup.
                            Below are the files (<b>{{unitLogs.length}}</b>) involved . The restore will use all the
                            files stored
                            in <b>{{restored.log.path}}</b> to
                            restore the database.
                        </p>
                    </div>
                </div>
            </div>
            <br />
            <div class="row">

                <div class="col-md-12">
                    <table class="table table-striped  table-fixed-header table-backup">
                        <thead>
                            <tr>
                                <th>Mode</th>
                                <th>When</th>
                                <th>File Name</th>
                                <th>File Size</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let u of unitLogs">
                                <td>{{ u.mode }}</td>
                                <td>{{ u.timestamp | date : 'medium'}}</td>
                                <td>{{ u.fileName }}</td>
                                <td>{{ u.fileSize | toSizeString }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </bs-modal-body>
        <bs-modal-footer [showDefaultButtons]="false">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button class="btn btn-primary" [disabled]="!canEdit || restored.target==null || restored.target == ''"
                (click)="onRestore()">Restore
            </button>
        </bs-modal-footer>
    </bs-modal>

    <bs-modal #removeBackupModal>
        <bs-modal-header [showDismiss]="true">
            <h4 class="modal-title">Remove Backup Unit <b>{{restored.unitId}}</b></h4>
        </bs-modal-header>
        <bs-modal-body>

            <div class="row">
                <div class="col-md-12">
                    <div class="studio-well">
                        <p>
                            The selected backup event (<b>{{restored.log.mode}}</b>) is part of a backup.
                            Below are the files (<b>{{unitLogs.length}}</b>) involved. All the backups done after
                            the selected (<b> {{ restored.log.fileName }} </b>) backup will be deleted (Marked in red).
                        </p>
                    </div>
                </div>
            </div>
            <br />
            <div class="row">

                <div class="col-md-12">
                    <table class="table table-striped  table-fixed-header table-backup">
                        <thead>
                            <tr>
                                <th>Mode</th>
                                <th>When</th>
                                <th>File Name</th>
                                <th>File Size</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let u of unitLogs" [ngClass]="{ 'danger' : u.timestamp >= restored.log.timestamp}">
                                <td>{{ u.mode }}</td>
                                <td>{{ u.timestamp | date : 'medium'}}</td>
                                <td>{{ u.fileName }}</td>
                                <td>{{ u.fileSize | toSizeString }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </bs-modal-body>
        <bs-modal-footer [showDefaultButtons]="false">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button class="btn btn-danger" [disabled]="!canEdit" (click)="onRemove()">Remove</button>
        </bs-modal-footer>
    </bs-modal>
</div>
